<template>
    <div id="authority_account">
        <!-- 筛选 -->
        <el-form :inline="true" class="demo-form-inline" size="medium" :disabled="load">
            <el-form-item>
                <el-select v-model="requestParam.status" placeholder="状态" @change="getList(1)">
                    <el-option value="" label="全部"></el-option>
                    <el-option value="1" label="正常"></el-option>
                    <el-option value="-1" label="已冻结"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button @click="openAddForm" type="success">添加账号</el-button>
            </el-form-item>
        </el-form>
        <!-- 表格 -->
        <el-table :data="list" stripe style="width: 100%" v-loading="load">
            <el-table-column prop="aiid" label="id" align="center"></el-table-column>
            <el-table-column prop="aiaccount" label="账号" width="120" align="center"></el-table-column>
            <el-table-column prop="arrole_name" label="账号" align="center"></el-table-column>
            <el-table-column prop="aibus_tail_id_str" label="分配商家匹配尾号" align="center"></el-table-column>
            <el-table-column prop="airemark" label="备注" align="center"></el-table-column>
            <el-table-column prop="aistatus" label="状态" align="center">
                <template slot-scope="scope">
                    <span v-if="scope.row.aistatus == 1">正常</span>
                    <span v-if="scope.row.aistatus == -1" class="error">冻结</span>
                </template>
            </el-table-column>
            <el-table-column label="最近登录时间" align="center">
                <template slot-scope="scope">
                    <span>{{ $moment(scope.row.ailogin_time).format('Y-MM-DD HH:mm') }}</span>
                </template>
            </el-table-column>
            <el-table-column label="创建时间" align="center">
                <template slot-scope="scope">
                    <span>{{ $moment(scope.row.aicreate_time).format('Y-MM-DD HH:mm') }}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="400" class-name="operation">
                <template slot-scope="scope">
                    <div v-if="scope.row.aiid != 1">
                        <el-button type="success" size="small" @click="setBusTailIdStr(scope.row.aiid)">分配商家</el-button>
                        <el-button type="success" size="small" @click="cancelTailId(scope.row.aiid)">取消分配</el-button>
                        <el-button type="primary" size="small" @click="setupdateForm(scope.row)">修改</el-button>
                        <el-button type="warning" size="small" @click="freeze(scope.row.aiid)"
                                   v-if="scope.row.aistatus == 1">冻结
                        </el-button>
                        <el-button size="small" @click="thaw(scope.row.aiid)" v-if="scope.row.aistatus == -1">解冻</el-button>
                        <el-button type="danger" size="small" @click="del(scope.row.aiid)">删除</el-button>
                    </div>
                </template>
            </el-table-column>
        </el-table>

        <el-pagination background layout="total, prev, pager, next" :page-size="requestParam.pageSize"
                       :current-page.sync.sync="requestParam.pageNo"
                       :total="total" @current-change="getList" class="margin_top20 align-right">
        </el-pagination>

        <!-- 添加账号弹框 -->
        <el-dialog center title="添加账号" :visible.sync="addVisible" :close-on-click-modal="false" width="420px">
            <el-form ref="form" :model="addForm" label-width="100px" :rules="rules" label-position="left">
                <el-form-item label="角色" prop="roleId">
                    <el-select v-model="addForm.roleId" v-infinite-scroll="getRoleList" placeholder="请选择角色">
                        <el-option v-for="(item, index) in roleList" :key="index" :label="item.role_name"
                                   :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="账号" prop="account">
                    <el-input v-model="addForm.account" placeholder="请输入账号" maxlength="30"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input v-model="addForm.password" type="password" placeholder="请输入密码" maxlength="18"></el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="rePassword">
                    <el-input v-model="addForm.rePassword" type="password" placeholder="请再次输入密码"
                              maxlength="18"></el-input>
                </el-form-item>
                <el-form-item label="备注">
                    <el-input v-model="addForm.remark" placeholder="可在此处填写备注"></el-input>
                </el-form-item>
                <el-form-item label="仓库管理员">
                    <el-radio-group v-model="addForm.isStoremanager">
                        <el-radio label="2">否</el-radio>
                        <el-radio label="1">是</el-radio>
                    </el-radio-group>
                </el-form-item>
                    <el-form-item label="选择仓库" v-if="addForm.isStoremanager == 1" prop="storeId">
                    <el-select v-model="addForm.storeId" placeholder="请选择仓库">
                        <el-option :label="item.name" :value="item.id" v-for="(item, index) in storeList"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
				<el-button @click="addVisible = false">取 消</el-button>
				<el-button type="primary" @click="add">添 加</el-button>
			</span>
        </el-dialog>

        <!-- 修改账号弹框 -->
        <el-dialog center title="修改账号" :visible.sync="updateVisible" :close-on-click-modal="false" width="500px">
            <el-form ref="form" :model="updateForm" label-width="100px" :rules="rules">
                <el-form-item label="角色" prop="roleId">
                    <el-select v-model="updateForm.roleId" v-infinite-scroll="getRoleList" placeholder="请选择角色">
                        <el-option v-for="(item, index) in roleList" :key="index" :label="item.role_name"
                                   :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="账号" prop="account">
                    <el-input v-model="updateForm.account" placeholder="请输入账号" maxlength="30"></el-input>
                </el-form-item>
                <el-form-item label="修改密码?" prop="account">
                    <el-radio-group v-model="isUpdPwd">
                        <el-radio label="1">不修改</el-radio>
                        <el-radio label="2">修改</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="密码" prop="password" v-show="isUpdPwd == 2">
                    <el-input v-model="updateForm.password" type="password" placeholder="请输入密码"
                              maxlength="18"></el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="rePassword" v-show="isUpdPwd == 2">
                    <el-input v-model="updateForm.rePassword" type="password" placeholder="请再次输入密码"
                              maxlength="18"></el-input>
                </el-form-item>
                <el-form-item label="备注">
                    <el-input v-model="updateForm.remark" placeholder="可在此处填写备注" maxlength="50"></el-input>
                </el-form-item>
                <el-form-item label="仓库管理员">
                    <el-radio-group v-model="updateForm.isStoremanager">
                        <el-radio label="2">否</el-radio>
                        <el-radio label="1">是</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="选择仓库" v-if="updateForm.isStoremanager == 1" prop="storeId">
                    <el-select v-model="updateForm.storeId" placeholder="请选择仓库">
                        <el-option :label="item.name" :value="item.id" v-for="(item, index) in storeList"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
				<el-button @click="updateVisible = false">取 消</el-button>
				<el-button type="primary" @click="update">修 改</el-button>
			</span>
        </el-dialog>
    </div>
</template>

<script>
import rsa from '@/utils/rsa'

export default {
    data() {
        return {
            list: [],
            load: false,
            requestParam: {
                pageSize: 10,
                pageNo: 1,
                status: ''
            },
            total: 0,
            roleParam: {
                pageNo: 0,
                pageSize: 10
            },
            roleTotal: 0,
            roleList: [],
            addVisible: false,
            updateVisible: false,
            // 是否修改密码
            isUpdPwd: '1',
            storeList: [],
            // 账号表单信息
            updateForm: {
                id: -1,
                roleId: '',
                account: '',
                password: '',
                rePassword: '',
                remark: '',
                isStoremanager: '',
                storeId: ''
            },
            addForm: {
                id: -1,
                roleId: '',
                account: '',
                password: '',
                rePassword: '',
                remark: '',
                isStoremanager: '2',
                storeId: ''
            },
            rules: {
                roleId: {
                    message: '请选择角色',
                    required: true
                },
                account: {
                    message: '请输入账号',
                    required: true,
                    trigger: 'blur'
                },
                password: {
                    required: true,
                    trigger: 'blur',
                    validator: (rule, value, callback) => {
                        if ((this.updateVisible && this.isUpdPwd == '2' && !value) || (this.addVisible && !value)) {
                            callback(new Error('请输入密码'));
                        } else if ((this.updateVisible && this.isUpdPwd == '2' && value && (value.length < 6 || value.length > 20)) ||
                            this.addVisible && value && (value.length < 6 || value.length > 20)) {
                            callback(new Error('密码长度必须是6-20位'));
                        } else {
                            callback();
                        }
                    }
                },
                rePassword: {
                    required: true,
                    trigger: 'blur',
                    validator: (rule, value, callback) => {
                        if ((this.updateVisible && this.isUpdPwd == '2' && !value) || (this.addVisible && !value)) {
                            callback(new Error('请再次输入密码'));
                        } else if (this.addVisible && value !== this.addForm.password) {
                            callback(new Error('两次输入密码不一致!'));
                        } else if (this.updateVisible && value !== this.updateForm.password && this.isUpdPwd == '2') {
                            callback(new Error('两次输入密码不一致!'));
                        } else {
                            callback();
                        }
                    }
                },
                storeId: {
                    trigger: 'change',
                    validator: (rule, value, callback) =>{
                        if(this.addForm.isStoremanager == 1 && !value){
                            callback('请选择仓库');
                        }else if(this.updateForm.isStoremanager == 1 && !value){
                            callback('请选择仓库');
                        }else{
                            callback()
                        }
                    }
                }

            }
        };
    },

    mounted() {
        this.getList(1)
        this.getRoleList();
        this.getStoreList();
    },

    methods: {
        // 获取账号列表
        getList(pageNo) {
            this.load = true
            this.requestParam.pageNo = pageNo
            this.$request.post({
                url: '/ReportApi/admin/accountlists',
                params: this.requestParam,
                success: result => {
                    this.list = result[0]
                    this.total = result[1]
                },
                finally: () => {
                    this.load = false
                }
            })
        },

        // 获取角色列表
        getRoleList() {
            console.log((this.roleParam.pageNo * this.roleParam.pageSize >= this.roleTotal) && this.roleTotal > 0)
            if ((this.roleParam.pageNo * this.roleParam.pageSize >= this.roleTotal) && this.roleTotal > 0) {
                return;
            }
            this.roleParam.pageNo++
            this.$request.post({
                url: '/ReportApi/admin/rolelist',
                params: this.roleParam,
                success: result => {
                    this.roleList = result[0]
                    this.roleTotal = result[1]
                },
                finally: () => {
                    this.load = false
                }
            })
        },

        getStoreList(){
            this.$request.post({
                url: '/ReportApi/admin/stopareaalllistt',
                success: result=>{
                    this.storeList = result
                }
            })
        },

        // 添加
        add() {
            if (this.load) {
                return;
            }
            this.$refs['form'].validate((valid) => {
                if (valid) {
                    this.load = true;
                    this.addVisible = false
                    this.$request.post({
                        url: '/ReportApi/admin/accountadd',
                        params: {
                            roleId: this.addForm.roleId,
                            account: this.addForm.account,
                            password: rsa.encryptByPublicKey(this.addForm.password),
                            remark: this.addForm.remark,
                            isStoremanager: this.addForm.isStoremanager,
                            storeId: this.addForm.storeId
                        },
                        success: result => {
                            this.$message.success('添加成功')
                            this.getList(1)
                        },
                        finally: () => {
                            this.load = false
                        }
                    })
                }
            })
        },

        // 打开添加窗口
        openAddForm() {
            this.reset()
            this.addVisible = true
        },

        // 重置表单信息
        reset() {
            this.updateForm.roleId = ''
            this.updateForm.id = ''
            this.updateForm.account = ''
            this.updateForm.password = ''
            this.updateForm.rePassword = ''
            this.updateForm.remark = ''
            var setint = setInterval(() => {
                if (this.$refs.form) {
                    this.$refs.form.resetFields()
                    this.$refs.form.clearValidate()
                    clearInterval(setint)
                }
            }, 100)
        },

        // 设置角色表单信息
        setupdateForm(data) {
            console.log(data)
            this.updateForm = {
                id: data.aiid,
                roleId: data.airole_id,
                account: data.aiaccount,
                remark: data.airemark,
                isStoremanager: data.aiis_store_manager.toString(),
                storeId: data.aistore_id
            }
            this.updateVisible = true
        },

        setBusTailIdStr(id){
            this.$prompt('请输入商家id尾号(以，隔开)', '分配商家', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                inputPattern: /[0-9](,[0-9])*$/,
                inputErrorMessage: '格式不正确'
            }).then(({ value }) => {
                if(this.loading) return;
                this.loading = true
                this.$request.post({
                    url: '/ReportApi/admin/accountdistribute',
                    params: {
                        id:id,
                        busTailIdStr:value,
                    },
                    success: result =>{
                        this.$message.success('分配成功');
                        this.getList(1)
                    },
                    finally: ()=>{
                        this.loading = false
                    }
                })
            }).catch(() => {
            });
        },

        // 取消分配
        cancelTailId(id) {
            if (this.load) {
                return;
            }
            this.$confirm('是否取消该账号的分配商家?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.load = true
                this.$request.post({
                    url: '/ReportApi/admin/accountcancelDistribute',
                    params: {
                        id:id
                    },
                    success: result => {
                        this.$message.success('取消成功')
                        this.getList(this.requestParam.pageNo)
                    },
                    finally: () => {
                        this.load = false
                    }
                })
            })
        },

        // 修改
        update() {
            this.$refs['form'].validate((valid) => {
                if (!valid) {
                    return;
                }
                if (this.load) {
                    return;
                }
                this.updateVisible = false
                this.load = true
                this.$request.post({
                    url: '/ReportApi/admin/accountupdate',
                    params: {
                        id: this.updateForm.id,
                        roleId: this.updateForm.roleId,
                        account: this.updateForm.account,
                        password: this.updateForm.password ? this.updateForm.password : '',
                        remark: this.updateForm.remark,
                        isStoremanager: this.updateForm.isStoremanager,
                        storeId: this.updateForm.storeId
                    },
                    success: result => {
                        this.$message.success('修改成功')
                        this.reset();
                        this.getList(this.requestParam.pageNo)
                    },
                    finally: () => {
                        this.load = false
                    }
                })
            })
        },

        // 删除
        del(id) {
            if (this.load) {
                return;
            }
            this.$confirm('此操作将永久删除该账号, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.load = true
                this.$request.post({
                    url: '/ReportApi/admin/accountdel',
                    params: {
                        id
                    },
                    success: result => {
                        this.$message.success('删除成功')
                        this.getList(this.requestParam.pageNo)
                    },
                    finally: () => {
                        this.load = false
                    }
                })
            })
        },

        // 冻结
        freeze(id) {
            if (this.load) {
                return;
            }
            this.$confirm('是否冻结该账号?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.load = true
                this.$request.post({
                    url: '/ReportApi/admin/accountfreezeOrThaw',
                    params: {
                        id,
                        status: -1
                    },
                    success: result => {
                        this.$message.success('冻结成功')
                        this.getList(this.requestParam.pageNo)
                    },
                    finally: () => {
                        this.load = false
                    }
                })
            })
        },

        // 解冻
        thaw(id) {
            if (this.load) {
                return;
            }
            this.$confirm('是否解冻该角色?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.load = true
                this.$request.post({
                    url: '/ReportApi/admin/accountfreezeOrThaw',
                    params: {
                        id,
                        status: 1
                    },
                    success: result => {
                        this.$message.success('解冻成功')
                        this.getList(this.requestParam.pageNo)
                    },
                    finally: () => {
                        this.load = false
                    }
                })
            })
        }


    }

}
</script>

<style>

</style>

<style scoped>

</style>
